<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>hint test</title>
    <link href="jquery.hint.css" rel="stylesheet" type="text/css" />
    <script src="../../jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.hint.js"></script>
    <script type="text/javascript">
        function getValue(e){
            $(this).val(e.data.getHintValue());
        }

        function getCode(e) {
            $(this).val(e.data.getHintCode());
        }

        $().ready(function () {

            var hinter1 = $('#txt_1').jHint({
                type: 'StationSection'
            });


            $('#hinter1Value').bind('click', hinter1, getValue);




            $('#hinter2Value').bind('click', hinter2, getValue);
            $('#hinter1Code').bind('click', hinter1, getCode);
            $('#hinter2Code').bind('click', hinter2, getCode);

            $('#btn_get').click(function () {

                var v = hinter1.getHintCode()
                alert(v);
            
            })


        });
    </script>
</head>
<body>
<div id="hinterTest" class="hinterTestContainer">
    <table>
        <tr>
            <td>
                <div id="hinter1" class="hinterContainer">
                    <input id="txt_1" type="text" />
                </div>
            </td>
            <td>
                <div id="hinter2" class="hinterContainer">
                </div>
            </td>
        </tr>
        <tr>
            <td><input id="hinter1Value" type="text"></td>
            <td><input id="hinter2Value" type="text"><input type="button" id="btn_get" value="Getcode" /></td>
            
        </tr>
        <tr>
            <td><input id="hinter1Code" type="text"></td>
            <td><input id="hinter2Code" type="text"></td>
        </tr>
    </table>

</div>

</body>
</html>